<template>
  <el-dialog :model-value="visible" @close="handleClose" title="选择科目">
    <el-checkbox-group v-model="checkedSubjects">
      <el-checkbox v-for="subject in subjects" :key="subject.value" :value="subject.value">
        {{ subject.value }} - {{ subject.label }}
      </el-checkbox>
    </el-checkbox-group>
    <template #footer>
      <el-button type="default" @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleOk">确认</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, watchEffect } from 'vue'
const emits = defineEmits(['update:visible', 'changeSubjects'])
const subjects = [
  { label: '交际舞', value: 1 },
  { label: '篮球', value: 2 },
  { label: '跆拳道', value: 3 },
  { label: '散打', value: 4 },
  { label: '花滑', value: 5 }
]

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  currentSubjects: {
    type: Array,
    default: () => []
  }
})

const checkedSubjects = ref([])
// 监听选中项的修改
watchEffect(() => {
  checkedSubjects.value = props.currentSubjects
})

// 关闭弹窗
const handleClose = () => {
  emits('update:visible', false)
}

// 确认选择
// 思考1： 这里能否直接修改prop传入的值呢？
// 思考2： 如何将选择的课程名称显示到页面
const handleOk = () => {
  // checkedSubjects.value 是一个新的指针了。
  // props.currentSubjects = checkedSubjects.value

  // 这样修改好用吗？？？
  props.currentSubjects[0] = checkedSubjects.value[0]
  // emits('changeSubjects', checkedSubjects.value)
  handleClose()
}
</script>
